<template>
    <div>
        <div class="header">收货地址</div>
        <el-descriptions :column="1" v-for="(item, index) in $store.state.list" :key="index" class="content" :colon="false">
            <el-descriptions-item class="item">收货人:{{ item.name }}
                <el-tag type="danger" v-if="index === $store.state.default">默认地址</el-tag>
                <el-button type="text" @click="edit(index,item)" class="item-item">修改地址</el-button>
                <el-button type="text" @click="del(index)" class="item-item">删除地址</el-button>
            </el-descriptions-item>
            <el-descriptions-item>手机号:{{ item.tell }}</el-descriptions-item>
            <el-descriptions-item>所在地:{{ item.city }}</el-descriptions-item>
            <el-descriptions-item>详细地址:{{ item.address }}</el-descriptions-item>
            <el-descriptions-item>
                <el-button type="text" v-if="index !== $store.state.default" @click="set(index)">设为默认地址</el-button>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>
export default {
    methods: {
        set(index){
            this.$store.commit('setDefault',index);
        },
        del(index){
            this.$store.commit('del', index);
        },
        edit(index, item) {
            this.$router.push({ path: "/views/list/add", query: { index, item:JSON.stringify(item) } });
        },
    },
};
</script>

<style scoped>
.header{
    width:100%;
    font-size: 16px;
    line-height: 46px;
    height: 46px;
    text-align: center;
    background: #fd4170;
    flex: 1;
    display: block;
    color: #fff;
}
.content{
    width:95%;
    border: solid 1px gray;
    border-radius: 5px;
    margin-top: 3px;
    margin-bottom: 5px;
    margin-left: 10px;
    padding: 8px;
    font-size: 16px;
}
.item-item{
   margin-left: 30px;
}
</style>